<!DOCTYPE html>
<html>
  <head>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <META name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome to guestbook</title>

    <!-- styles -->
    {% style "/assets/bootstrap/css/bootstrap.min.css" %}
    {% style "/assets/font-awesome/css/font-awesome.min.css" %}

    {% style "/css/screen.css" %}
  </head>
  <body>
      <!-- navbar -->
      <nav class="navbar navbar-light bg-faded" role="navigation">
          <button class="navbar-toggler hidden-sm-up"
                  type="button"
                  data-toggle="collapse"
                  data-target="#collapsing-navbar">
              &#9776;
          </button>
          <div class="collapse navbar-toggleable-xs" id="collapsing-navbar">
              <a class="navbar-brand" href="{{servlet-context}}/">guestbook</a>
              <ul class="nav navbar-nav">
                  <li class="nav-item">
                      <a href="{{servlet-context}}/"
                         class="navbar-brand{% ifequal page "home.html" %} active{%endifequal%}">
                      home
                      </a>
                  </li>
                  <li class="nav-item">
                      <a href="{{servlet-context}}/about"
                         class="nav-link{% ifequal page "about.html" %} active{%endifequal%}">
                      about
                      </a>
                  </li>
              </ul>
          </div>
      </nav>

    <div class="container">
      {% block content %}
      {% endblock %}
    </div>

    <!-- scripts -->
    {% script "/assets/jquery/jquery.min.js" %}
    {% script "/assets/tether/dist/js/tether.min.js" %}
    {% script "/assets/bootstrap/js/bootstrap.min.js" %}

    <script type="text/javascript">
      var context = "{{servlet-context}}";
    </script>
    {% block page-scripts %}
    {% endblock %}
  </body>
</html>
